<template>
  <div class="cart-bottom-bar">
    <div class="select-all" @click="selectAllClick">
      <img src="~assets/img/cart/select1.png" alt="" v-show="!isSelectAll" />
      <img src="~assets/img/cart/select2.png" alt="" v-show="isSelectAll" />
      <span>全选</span>
    </div>
    <div class="total-price">合计:¥{{ totalPrice }}</div>
    <div
      class="buy"
      :style="{ backgroundColor: checkedCount === 0 ? '#917272' : 'red' }"
      v-show="!isDelete"
      @click="goBuy"
    >
      去计算({{ checkedCount }})
    </div>
    <div class="delete" v-show="isDelete" @click="deleteSelect">
      <span>删除</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "CartBottomBar",
  data() {
    return {
      isDelete: false,
    };
  },
  computed: {
    ...mapGetters(["totalPrice", "cartList", "isSelectAll"]),
    checkedCount() {
      return this.cartList.filter((value) => value.checked).length;
    },
  },
  methods: {
    selectAllClick() {
      //如果全选则全不选,如果没有全选则全选
      if (this.isSelectAll) {
        this.$store.commit("selectNone");
      } else {
        this.$store.commit("selectAll");
      }
    }, //删除所选商品
    deleteSelect() {
      this.$store.commit("deleteSelect");
    },
    goBuy() {
      this.$store
        .dispatch("aUpdateBuyList", this.$store.getters.isSelectGoods)
        .then(() => {
          this.$router.push("/order");
        });
    },
  },
};
</script>

<style scoped>
.cart-bottom-bar {
  position: fixed;
  bottom: 48px;
  left: 0;
  right: 0;
  height: 35px;
  display: flex;
  align-items: center;
  border-top: 1px solid #dddbdb;
  padding: 5px 0 5px 5px;
}
.select-all {
  display: flex;
  align-items: center;
  width: 60px;
  padding: 3px 0;
}
.select-all span {
  font-size: 14px;
  padding-left: 4px;
  color: #6b6b6b;
}

.total-price {
  flex: 2;
  font-size: 14px;
  text-align: center;
}
.buy {
  flex: 1;
  background-color: red;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
}
.delete {
  flex: 1;
  font-size: 15px;
  text-align: right;
}
.delete span {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-tint);
  color: var(--color-tint);
  margin-right: 10px;
}
</style>
